<template>
  <el-card class="notice">
    <!-- 成都地图 -->
    <div class="front">
      <div ref="testLine" id="testLine" style="width:1000px; height:800px"></div>
    </div>
    <!-- 本年两种订单总量 -->
    <!-- <el-card class="right">
      <div id="type" class="type"></div>
    </el-card> -->
  </el-card>
</template>

<script>
// 引入这个json 文件
import chengduMap from '@/assets/Js/chengdu.json'
import * as echarts from 'echarts'
export default {
  name: 'Map',
  data () {
    return {
      myChart: null,
      option: {
        title: {
          text: '成都市区域地图',
          textStyle: {
            color: '#515f8a'
          },
          left: 'center'
        },
        geo: {
          type: 'map',
          map: 'CD',
          zoom: 0.75,
          itemStyle: {
            areaColor: {
              type: 'linear',
              colorStops: [{
                offset: 0, color: '#e2ecbd' // 0% 处的颜色
              }, {
                offset: 1, color: '#e2ecbd' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          emphasis: {
            itemStyle: {
              color: '#f5db7f',
              borderColor: '#767a72',
              borderWidth: 1
            }
          },
          roam: true
        },
        series: [
          {
            name: '成都市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              { name: '市南点位', value: [120.395966, 36.070892, 50] }
            ],
            symbol: 'pin',
            symbolSize: '30',
            encode: {
              value: 2
            },
            label: {
              formatter: (a) => {
                return `${a.name} ${a.value[2]}`
              },
              position: 'right',
              show: false,
              backgroundColor: '#fff',
              fontSize: 14,
              borderWidth: 1,
              borderRadius: 5,
              height: 80
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      },
      // 订单总量圆环图
      opinionData: [],
      typeName: []
    }
  },
  mounted () {
    // 成都地图
    this.myChart = this.$echarts.init(this.$refs.testLine)
    this.initChart()
    // 门牌圆环图
    this.initChartType()
  },
  methods: {
    // 成都地图
    initChart () {
      const {
        myChart,
        option
      } = this
      // 需要注册地区，注意这个名称就是后边引用地图名称QD
      this.$echarts.registerMap('CD', { geoJSON: chengduMap })
      myChart.setOption(option)
    },
    // 门牌圆环图
    initChartType () {
      this.$axios.get('').then(res => {
        console.log(res)
        this.opinionData = res.data
        for (let index = 0; index < this.opinionData.length; index++) {
          this.typeName.push(this.opinionData[index].typeName)
        }
        this.drawLineType('type')
        this.charts.setOption({
          series: [{
            data: this.opinionData
          }]
        })
      })
        .catch((err) => {
          console.log(err)
        })
    },
    drawLineType (id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: '本年申请门牌数量图',
          x: 'center'
        },
        // 具体点击某一项触发的样式内容
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: '3%',
          right: '15%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // 图例
        legend: [{
          selectedMode: true,
          top: '10%',
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          },
          data: ['申请门牌数', '补发门牌数']
        }],
        series: [{
          name: '本月订单数',
          type: 'pie',
          radius: ['30%', '45%'],
          center: ['50%', '50%'],
          data: []
        }]
      })
    }
  }
}
</script>

<style>
.notice {
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 15px 15px 10px -12px #4c61a0;
  /* background-color: #75cff0; */
}

.front {
  display: block;
  float: left;
  width: 65%px;
  height: 700px;
  border-radius: 15px;
  background-color: #e0ffff;
}
/* 圆环图 */
.right {
  display: block;
  float: left;
}
.type {
  width: 300px;
  height: 400px;
}
</style>
